<template>
	<view class="page">
		<view class="finish">
			<image src="../../../static/submit.png"></image>
		</view>
		<view class="text">
			<view class="text_score">
				<text class="words">能力维度：</text><text class="fraction">{{score.ability}}</text>
			</view>
			<view class="text_score">
				<text class="words">潜力与价值观：</text><text class="fraction">{{score.potential}}</text>
			</view>
			<view class="total_score">
				<text class="words">总计得分</text><text class="fraction">{{score.scoress}}</text>
			</view>
		</view>
		<view class="anniu">
			<button type="primary" hover-class="annius" @click="click()">返回</button>
		</view>
	</view>
</template>

<script setup>
	const score = ref({})

	const scores = () => {
		score.value.scoress = parseFloat((parseFloat(score.value.ability || 0) + parseFloat(score.value.potential || 0)).toFixed(2));
	}

	const click = () => {
		uni.switchTab({
			url: '/pages/shouye/shouye'
		})
	}

	// onload方法
	onLoad((xin) => {
		score.value.ability = xin.ability;
		score.value.potential = xin.potential;
		scores();
	});
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;

		.finish {
			width: 260rpx;
			height: 260rpx;
			overflow: hidden;
			margin-top: 240rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			margin-top: 70rpx;
			width: 220rpx;

			.text_score {
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 30px;

				.words {
					font-size: 26rpx;
					color: #999999;
				}

				.fraction {
					font-size: 26rpx;
					color: #0C5FFA;
					font-weight: bolder;
				}

			}

			.total_score {
				display: flex;
				flex-direction: column;
				text-align: center;
				margin-top: 20px;

				.words {
					font-size: 26rpx;
					color: #999999;
				}

				.fraction {
					font-size: 110rpx;
					color: #0C5FFA;
				}

			}

		}

		.anniu {
			width: 90%;
			position: absolute;
			bottom: 30rpx;

			.annius {
				background-color: #00aaff;
				color: #1e6afa;
			}
		}

	}
</style>